<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>logging</title>
    <script>
        function navigateToLink1() {
            window.location.href = "http://127.0.0.1:8080/static/menu.html";
        }
    </script>
    <style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    h1 {
        text-align: center;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    tr:hover {
        background-color: #f1f1f1;
    }
    button {
        display: block;
        width: 150px;
        padding: 12px;
        margin: 0 auto;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        transition: background 0.3s ease, transform 0.3s ease;
    }

    button:hover {
        background-color: #0056b3; /* 悬停时的背景颜色 */
        transform: scale(1.05);
    }

    button:active {
        transform: scale(0.95);
    }
    </style>
</head>
<body>
<button onclick="navigateToLink1()">菜单栏</button>
<h1>用户活动记录</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>登录时间</th>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行将在这里被插入 -->
    </tbody>
</table>

    <script>
        // 定义一个函数来执行Ajax请求
        function fetchData() {
            const xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象
            xhr.open('GET', '/data1', true); // 配置请求的类型、URL和是否异步

            // 设置请求完成后的回调函数
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 解析返回的JSON数据
                    const data = JSON.parse(xhr.responseText);

                    // 获取表格的tbody元素
    const tbody = document.querySelector('#data-table tbody');

    // 遍历数据并创建行
    data.forEach(item => {
        const tr = document.createElement('tr');

        // 创建单元格并设置内容
        const idCell = document.createElement('td');
        idCell.textContent = item.id;
        tr.appendChild(idCell);

        const usernameCell = document.createElement('td');
        usernameCell.textContent = item.username;
        tr.appendChild(usernameCell);

        const timeCell = document.createElement('td');
        // 将ISO格式的日期时间字符串转换为本地时间字符串
        const localTime = new Date(item.time).toLocaleString();
        timeCell.textContent = localTime;
        tr.appendChild(timeCell);

        // 将行添加到tbody中
        tbody.appendChild(tr);

            });
        } else {
            console.error('请求失败，状态码：', xhr.status);
        }
    };
    xhr.send();
}

// 调用函数以在页面加载时获取数据
window.onload = fetchData;
    </script>
</body>
</html>